<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>会员登录</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .bg{
      width: 100%;
      height: 750px;
      min-width: 1024px;
      position: relative;
      background-image: url(./img/denglu.jpg);
    }
    .logo img{
      width: 200px;
      margin: 20px 0 100px 20px;
    }
    .center{
      width: 300px;
      background-color: rgba(0,0,0,0.3) ;
      border-radius : 5px;
      margin-left: 150px;
      padding: 20px;
    }
    .center h3{
      text-align: left;
      color: #fff;
      font-size: 25px;
    }
    .center label {
      color: #fff;
      font-size: 20px;
    }
    .center input{
      border: 0;
      border-radius: 3px;
      width: 200px;
      height: 30px ;
      margin: 20px 0 20px 0;
    }
    .center p {
      margin-bottom: 20px;
      text-align: right;
    }
    .center a{
      color: #fff;
      text-decoration: none;
    }
    .center button{
      width: 100%;
      height: 30px;
      color: #fff;
      background-color: #0aa1ed;
      font-size: 20px;
      border: 0;
      border-radius: 5px;
    }

  </style>
</head>

<body>
  <div class="bg">
    <div>
      <p class="logo"><a href="index.html"><img src="./img/logo.png" alt=""></a></p>
    </div>
    <div class="center">
          <h3>用户登录</h3>
         
          <hr>
          <label class="yhm"> *用户名：</label><input type="text" placeholder="请输入用户名" id="aname"><br>
          <label class="mm">*密&#x3000;码：</label><input type="password" placeholder="请输入密码" id="apwd">  
          <P class="wj"><a href="register.html">新用户注册丨</a><a href="500.html">忘记密码？</a></p>
          <button id="btn">登录</button>
    </div>
  </div>


  <script>
    //1.获取所有需要的元素（id）
    var aname = document.getElementById('aname');
    var apwd = document.getElementById('apwd');
    var btn = document.getElementById('btn');
    //2.写ajax函数
    function ajax(a, b) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            var result = JSON.parse(xhr.responseText);
            //console.log(result);
            //result.code == 1 登录正确
            if (result.code == 1) {
              alert("登陆成功");
              //登录成功跳转至指定页面
              location.href = "http://127.0.0.1:8080/azhang.html";
              //登录成功后jump里面加入一个可以跳转到列表的超链接
            } else {
              alert("登陆失败");
            }
          } else {
            console.log('数据返回错误');
          }
        }
      }
      xhr.open('POST', '/user/users', true);
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.send(`aname=${a}&apwd=${b}`);
    }
    //3.点击按钮接收用户输入内容并传递给ajax函数
    btn.onclick = function () {
      //先接收参数
      var anameval = aname.value.trim();
      var apwdval = apwd.value.trim();
      //判断是否有空值
      console.log(anameval, apwdval);
      if (anameval != '' && apwdval != '') {
        //在给ajax传参
        ajax(anameval, apwdval);
      } else {
        alert('用户名和密码不能为空');
      }
    }
  </script>
</body>

</html>